<template> 
    <div class="box">
        <div class="card">
              <el-carousel :interval="4000" type="card" height="320px" style="width:90%;padding-left:40px">
                  <el-carousel-item>
                      <img src='../../assets/catinfo_img/9.jpg' alt="">
                  </el-carousel-item>
                  <el-carousel-item>
                      <img src='../../assets/catinfo_img/10.jpg' alt="">
                  </el-carousel-item>
                  <el-carousel-item>
                      <img src='../../assets/catinfo_img/11.jpg' alt="">
                  </el-carousel-item>
                  <el-carousel-item>
                      <img src='../../assets/catinfo_img/12.jpg' alt="">
                  </el-carousel-item>
              </el-carousel>
        </div>

        <div class="feedtext">
            <el-collapse v-model="activeNames" @change="handleChange" style="padding-left:20px" accordion>
                <el-collapse-item title="饮食" name="1">
                  <div class="text">所有的猫咪都有一个共同的特点，就是肠胃的消化功能比较弱，英国短毛猫也不是例外，这主要体现在突然更换口粮
                    的时候，主人如果换粮太突然，就会导致它腹泻，但也不需要过多的担心，只要你合理地慢慢地让它适应新的猫粮，
                  不要一次全部换掉，就不容易腹泻了。
                  </div>
                  
                </el-collapse-item>
                <el-collapse-item title="环境" name="2">
                  <div class="text">英国短毛猫的老祖宗们给它们留下了吃苦耐劳的优良传统，这使它们比一般的猫都要强，面对陌生的环境可以泰然处
                  之，没有一丝恐惧。页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                </el-collapse-item>
                <el-collapse-item title="护理" name="3">
                  <div class="text">对于英国短毛猫，清洗要远远比梳理重要得多，因为它们的被毛密实又柔软，灰尘很容易带在那里。虽然猫咪们会经
                  常用它那带刺的小舌头梳理被毛，但是并不能彻底除去底层的灰尘，所以每个月给它洗澡1~2次，可以帮助他很好地
                  清理污垢，毛毛清洁了，猫咪自然开心。</div>
                </el-collapse-item>
                <el-collapse-item title="运动" name="4">
                  <div class="text">英国短毛猫喜欢亲近主人，如果你一直以来只喜欢它们乖乖地趴在你的膝盖上睡觉，那就需要注意了，因为猫咪长期
                 不做运动就会发胖，而体型过胖的猫咪，身体状况也会出现问题。原理很简单，就像我们人一样，平时不运动，发胖
                了就会有好多病找上门来。所以，要有一只乖巧又健康的猫咪，你每天至少要陪它做游戏半个小时左右，这样，既可                
                  以增加你和猫咪的感情，又可以一起保持匀称的身材。</div>
                </el-collapse-item>
          </el-collapse>
        </div>
        <div class="btn" >
            <el-button type="text" plain @click="dialogFormVisible = true" style="font-size:30px;color:#F08080;background-color:#FFF8DC">修改</el-button>
        </div>

        <el-dialog title="请修改信息" v-model="dialogFormVisible">
            <el-form :model="form">

                <el-form-item label="饮食" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="环境" :label-width="formLabelWidth">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="护理" :label-width="formLabelWidth">
                    <el-input v-model="form.date" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="运动" :label-width="formLabelWidth">
                    <el-input v-model="form.type" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    export default {    
        methods: {
          handleChange(val) {
            console.log(val);
          }
        },
        data() {
            return{
            dialogFormVisible: false,
                form: {
                    name: '',
                    age:'',
                    date: '',
                    type: '',
                    hobby:'',
                },
                formLabelWidth: '120px',
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-collapse-item__header {
      font-size:25px;
      font-family: "STCaiyun";
      color:#606266;
      background-color: #F8F8FF;
      padding-left:20px;
      text-align:center;
      border-bottom: 3px solid rgb(255, 255, 255)!important;
    }
    .feedtext{
      width: 95%;
      padding-top: 50px;
    }
    .el-collapse-item{
      padding-left:20px;
    }
    .text{
      text-indent:2em;
      font-size: 20px;
      padding-left:20px;
    }
    .btn{
      text-align: center;
    }

</style>